<template>
  <section>
    <el-form label-width="100px">
      <el-form-item label="名称：">
        <el-input size="mini" v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="选择类型：">
        <el-select v-model="form.qrCodeTypeCode" size="mini" placeholder="请选择">
          <el-option v-for="type in typeList" :key="type.id" :label="type.name" :value="type.code" v-if="typeList">
            <span style="float: left">{{ type.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ type.code }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="路径：">
        <el-input size="mini" v-model="form.api"></el-input>
      </el-form-item>
      <el-form-item label="刷新时间：">
        <el-input size="mini" v-model="form.expireSecond" style="width:100px;margin-right:10px"/> - 秒（默认120s）
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="confirmBtn">{{currCode.id?'保存':'新建'}}</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "newCode",
    props:['currCode'],
    data() {
      return {
        form:{
          title:'',api:'',qrCodeTypeCode:null,expireSecond:null,params:null,data:null
        },
        selType:null,
        typeList:null
      }
    },
    created(){
      console.log(this.currCode)
      this.init()
      this.getQrCodeTypeList()
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(){
        this.form.title = this.currCode.title
        this.form.api = this.currCode.api
        this.form.data = this.currCode.data
        if(this.currCode.id){
          this.form.id = this.currCode.id
          this.form.qrCodeTypeCode = this.currCode.qrCodeType.code
          this.form.expireSecond = this.currCode.expireSecond
        }
        if(this.currCode.data.type === 'period' || this.currCode.qrCodeType.code  === "course_sign"){
          this.form.qrCodeTypeCode = "course_sign"
          this.getCustomerIds(this.currCode.data.periodId)
        }
      },
      getQrCodeTypeList(){
        this.fetch({name:"getQrCodeTypeList"})
          .then(res=>{
            console.log(res)
            this.typeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirmBtn(){
        console.log(this.form)
        this.$emit('confirm',this.form)
      },
      getCustomerIds(periodId,sizeNo){
        this.fetch({name:"getPeriodLearnerInfoList",data:{periodId,size:sizeNo?sizeNo:null}})
          .then(res=>{
            console.log(res)
            if(res.content.length >= res.totalElements){
              console.log(this.form)
              let customerIds = this.makeCustomerId(res.content)
              let params=[{param:"periodId",value:periodId,required:true},{param:"customerId",value:customerIds,required:false}]
              this.form.params=JSON.stringify({params})
              return
            }else {
              this.getCustomerIds(periodId,res.totalElements)
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      makeCustomerId(array){
        let tmp=[]
        array.forEach(a=>{
          let index = tmp.findIndex(t=>t === a.customerId)
          if(index <0) tmp.push(a.customerId)
        })
        return tmp
      }
    }
  }
</script>

<style scoped>

</style>
